<template>
  <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <van-notice-bar
      left-icon="volume-o"
      text="用餐愉快，嘻嘻"
      :scrollable="false"
  />

  <van-row :gutter="[0, 40]"  justify="center">
    <van-col span="20">
      <van-cell icon="location-o" title="天津市东丽区西八道东软睿道"  label="小红  18836367889" />
    </van-col>
    <van-col span="4" class="update-wrapper" @click="updateAdress">
      <van-icon name="edit" />
    </van-col>
  </van-row>
<!--  <van-nav-bar-->
<!--      title="确认订单"-->
<!--      left-text="返回"-->
<!--      left-arrow-->
<!--      @click-left="onClickLeft"-->
<!--  />-->

  <div class="order-confirm">
    <van-row v-for="cart of checkedCartList">
      <van-col span="2"></van-col>
      <van-col span="6">
        <van-image
            width="80px"
            height="60px"
            fit="fill"
            :src="cart.foodMainImage"
        />
      </van-col>
      <van-col span="10">
        <div class="name">{{ cart.foodName }}</div>
        <div class="price">￥{{ cart.foodPrice }}</div>
      </van-col>
      <van-col span="4" class="count-wrapper">
        <!--        <van-stepper v-model="cart.quantity" :name="cart.id" theme="round" button-size="22" disable-input-->
        <!--                     @change="handleQuantityChange"/>-->
        <span class="count">{{ cart.quantity }}</span>
      </van-col>
    </van-row>

  </div>
  <van-action-bar>
    <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
    <van-action-bar-button color="#7232dd" type="danger" text="立即购买" @click="onClickButton" />
  </van-action-bar>
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  name: "confirm",
  setup(){
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    }
    const onClickIcon = () => Toast('点击图标');
    const onClickButton = () => Toast('点击按钮');
    return {
      onClickIcon,
      onClickButton,
    };
  },

  data() {
    return {
      checkedCartList: [],
    }
  },
  methods: {
    onClickLeft(){
      this.$router.back()
    },
    updateAdress(){
      this.$router.push('/user/newAdress')
    },
    onClickButton(){

    }
  },
  created() {
    this.checkedCartList = JSON.parse(localStorage.getItem('setCheckedCartList'))
  }
}
</script>

<style scoped lang="stylus">
>>>.update-wrapper
  display flex
  justify-content center
  align-items center
</style>